<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="header" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
			<view class="own">个人中心</view>
			<view class="user">
				<view class="user-left">
					<image src="/static/mine10/avatar.jpg"></image>
					<view class="user-info">
						<text class="nickname">张小明</text>
						<view class="auth">
							<image src="/static/mine10/auth.png"></image>
							<text>高级认证</text>
						</view>
					</view>
				</view>
				<view class="user-right">
					<image src="/static/mine10/right.png"></image>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 会员模块 -->
			<view class="vip">
				<view class="vip-left">
					<image src="/static/mine10/vip.png"></image>
					<text>成为VIP享更多折扣</text>
				</view>
				<view class="vip-right">
					<text>成为会员</text>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="order">
				<view class="order-item">
					<image src="/static/mine10/order1.png"></image>
					<text>我的合同</text>
				</view>
				<view class="order-item">
					<image src="/static/mine10/order2.png"></image>
					<text>我的白皮书</text>
				</view>

			</view>
			<!-- 特色服务 -->
			<view class="service">
				<view class="service-item">
					<view class="service-item-left">
	
						<text>我的优惠券</text>
					</view>
					<image class="right-icon" src="/static/mine10/service-right.png"></image>
				</view>
				<view class="service-item">
					<view class="service-item-left">
						
						<text>我的订单</text>
					</view>
					<image class="right-icon" src="/static/mine10/service-right.png"></image>
				</view>
				<view class="service-item">
					<view class="service-item-left">
						
						<text class="color">关于我们</text>
					</view>
					<image class="right-icon" src="/static/mine10/service-right.png"></image>
				</view>
				<view class="service-item">
					<view class="service-item-left">
						
						<text>邀请好友</text>
					</view>
					<image class="right-icon" src="/static/mine10/service-right.png"></image>
				</view>
				<view class="service-item">
					<view class="service-item-left">
						
						<text>联系客服</text>
					</view>
					<image class="right-icon" src="/static/mine10/service-right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style lang="scss" scoped>
page {
	background: #FEFFFF;
}
.container { 
	background: linear-gradient(  #E2EAFF, rgba(255,255,255,0)  );
}
.header {
	opacity: 1;
	height: 360rpx;
}

.own{
	text-align: center;
	font-size: 34rpx;
	color: #121212 ;
	font-family:SourceHanSansCN;
	font-weight: 700;
}

.user {
	padding: 64rpx 40rpx 40rpx 40rpx;
	display: flex;
	justify-content: space-between;

	.user-left {
		display: flex;
		align-items: center;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.user-info {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;

			.nickname {
				font-size: 36rpx;
				font-weight: 600;
				color: #373948;
			}

			.auth {
				background: #FFFFFF;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				padding: 6rpx 16rpx;
				margin-top: 10rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					color: #F2A922;
					font-size: 22rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.user-right {
		display: flex;
		align-items: center;

		image {
			width: 14rpx;
			height: 26rpx;
		}
	}
}

.content {
	padding: 40rpx;
	margin-top: -160rpx;
}

.vip {
	height: 40rpx;
	background: #474959;
	padding: 40rpx 30rpx 80rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8rpx;
	

	.vip-left {
		display: flex;
		align-items: center;

		text {
			font-size: 28rpx;
			color: #7A6D67;
			margin-left: 16rpx;
		}

		image {
			width: 80rpx;
			height: 30rpx;
		}
	}

	.vip-right {
		padding: 10rpx 18rpx;
		border-radius: 48rpx;
		background: linear-gradient(to right, #EFCC98 0%, #DEAE68 100%);

		text {
			font-size: 24rpx;
			color: #705336;
		}
	}
}

.order {
	display: flex;
	justify-content: space-between;
	margin-top: 38rpx;
	.order-item{
		background-color: #fff;
		width: 328rpx;
		height: 134rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #666;
	}
	image {
			width: 40rpx;
			height: 40rpx;
		}
}

.service {
	border-radius: 20rpx;
	box-shadow: 0px 16rpx 50rpx #E9EFF5;
	background: #FFFFFF;
	padding: 10rpx 40rpx;
	box-shadow: 0px 0px 50px #F2F5E9;
	margin-top: 60rpx;

	.service-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0rpx;

		.service-item-left {
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
			}

			text {
				font-size: 28rpx;
				color: #666;
				margin-left: 24rpx;
			}
		}

		.right-icon {
			width: 12rpx;
			height: 24rpx;
		}
	}

	.service-item:not(:last-child) {
		border-bottom: 1rpx solid #F6F7F0;
	}
}
</style>